`;
-describe("s-banner", () => {
+describe("banner", () => {
runComponentTests({
type: "visual",
baseClass: "s-banner",
diff --git a/lib/css/components/block-link.less b/lib/components/block-link/block-link.less
similarity index 100%
rename from lib/css/components/block-link.less
rename to lib/components/block-link/block-link.less
diff --git a/lib/css/components/breadcrumbs.less b/lib/components/breadcrumbs/breadcrumbs.less
similarity index 100%
rename from lib/css/components/breadcrumbs.less
rename to lib/components/breadcrumbs/breadcrumbs.less
diff --git a/lib/css/components/button-groups.less b/lib/components/button-group/button-group.less
similarity index 100%
rename from lib/css/components/button-groups.less
rename to lib/components/button-group/button-group.less
diff --git a/lib/test/s-btn.a11y.test.ts b/lib/components/button/button.a11y.test.ts
similarity index 88%
rename from lib/test/s-btn.a11y.test.ts
rename to lib/components/button/button.a11y.test.ts
index 37308a8f66..f89f8aa895 100644
--- a/lib/test/s-btn.a11y.test.ts
+++ b/lib/components/button/button.a11y.test.ts
@@ -1,7 +1,7 @@
-import { runComponentTests } from "./test-utils";
-import "../ts/index";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
-describe("s-btn", () => {
+describe("button", () => {
runComponentTests({
type: "a11y",
baseClass: "s-btn",
diff --git a/lib/css/components/buttons.less b/lib/components/button/button.less
similarity index 100%
rename from lib/css/components/buttons.less
rename to lib/components/button/button.less
diff --git a/lib/test/s-btn.visual.test.ts b/lib/components/button/button.visual.test.ts
similarity index 87%
rename from lib/test/s-btn.visual.test.ts
rename to lib/components/button/button.visual.test.ts
index cb4106f9c3..82bca10016 100644
--- a/lib/test/s-btn.visual.test.ts
+++ b/lib/components/button/button.visual.test.ts
@@ -1,8 +1,8 @@
import { html } from "@open-wc/testing";
-import { runComponentTests } from "./test-utils";
-import "../ts/index";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
-const getChild = (child) => {
+const getChild = (child?: string): string => {
switch (child) {
case "badge":
return `Ask question
@@ -14,7 +14,7 @@ const getChild = (child) => {
}
};
-describe("s-btn", () => {
+describe("button", () => {
// TODO test disabled states, interaction pseudo-classes
runComponentTests({
type: "visual",
@@ -33,7 +33,7 @@ describe("s-btn", () => {
type: "button",
},
children: {
- default: getChild(""),
+ default: getChild(),
badge: getChild("badge"),
},
tag: "button",
diff --git a/lib/css/components/cards.less b/lib/components/card/card.less
similarity index 100%
rename from lib/css/components/cards.less
rename to lib/components/card/card.less
diff --git a/lib/components/check-control/check-control.less b/lib/components/check-control/check-control.less
new file mode 100644
index 0000000000..9cfac09d1f
--- /dev/null
+++ b/lib/components/check-control/check-control.less
@@ -0,0 +1,17 @@
+.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
+ --_cc-ai: center;
+
+ // CONTEXTUAL STYLES
+ .s-check-group & {
+ --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+ }
+
+ // CHILD ELEMENTS
+ .s-label {
+ font-weight: normal;
+ }
+
+ align-items: var(--_cc-ai);
+ display: flex;
+ gap: var(--su8);
+}
diff --git a/lib/components/check-group/check-group.less b/lib/components/check-group/check-group.less
new file mode 100644
index 0000000000..c432a89fe3
--- /dev/null
+++ b/lib/components/check-group/check-group.less
@@ -0,0 +1,19 @@
+.s-check-group {
+ --_cg-fd: column;
+
+ // MODIFIERS
+ &&__horizontal {
+ --_cg-fd: row;
+ }
+
+ // CHILD ELEMENTS
+ // TODO HACK?
isn't respecting gap...
+ legend.s-label {
+ margin-bottom: var(--su8);
+ }
+
+ flex-direction: var(--_cg-fd);
+
+ display: flex;
+ gap: var(--su8);
+}
diff --git a/lib/css/components/checkboxes-radios.less b/lib/components/checkbox_radio/checkbox_radio.less
similarity index 100%
rename from lib/css/components/checkboxes-radios.less
rename to lib/components/checkbox_radio/checkbox_radio.less
diff --git a/lib/css/components/code-blocks.less b/lib/components/code-block/code-block.less
similarity index 100%
rename from lib/css/components/code-blocks.less
rename to lib/components/code-block/code-block.less
diff --git a/lib/css/components/description.less b/lib/components/description/description.less
similarity index 100%
rename from lib/css/components/description.less
rename to lib/components/description/description.less
diff --git a/lib/css/components/empty-states.less b/lib/components/empty-state/empty-state.less
similarity index 100%
rename from lib/css/components/empty-states.less
rename to lib/components/empty-state/empty-state.less
diff --git a/lib/css/components/expandable.less b/lib/components/expandable/expandable.less
similarity index 100%
rename from lib/css/components/expandable.less
rename to lib/components/expandable/expandable.less
diff --git a/lib/test/s-expandable-control.test.ts b/lib/components/expandable/expandable.test.ts
similarity index 83%
rename from lib/test/s-expandable-control.test.ts
rename to lib/components/expandable/expandable.test.ts
index 09d87ab894..7096d12b9d 100644
--- a/lib/test/s-expandable-control.test.ts
+++ b/lib/components/expandable/expandable.test.ts
@@ -1,11 +1,11 @@
import { html, fixture, expect } from "@open-wc/testing";
import { screen } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";
-import "../ts/index";
+import "../../index";
const user = userEvent.setup();
-describe("s-expandable-control", () => {
+describe("expandable-control", () => {
it("should focus on expandable content only when expanded", async () => {
const trigger = await fixture(html`
{
expanded: false,
});
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(
screen.queryByRole("button", {
name: "inside expandable",
@@ -42,6 +43,7 @@ describe("s-expandable-control", () => {
expanded: true,
});
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(
screen.getByRole("button", {
name: "inside expandable",
diff --git a/lib/ts/controllers/s-expandable-control.ts b/lib/components/expandable/expandable.ts
similarity index 99%
rename from lib/ts/controllers/s-expandable-control.ts
rename to lib/components/expandable/expandable.ts
index 450c76b59a..c645f424a0 100644
--- a/lib/ts/controllers/s-expandable-control.ts
+++ b/lib/components/expandable/expandable.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
// Radio buttons only trigger a change event when they're *checked*, but not when
// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
diff --git a/lib/components/input-fill/input-fill.less b/lib/components/input-fill/input-fill.less
new file mode 100644
index 0000000000..77e2ecf2e9
--- /dev/null
+++ b/lib/components/input-fill/input-fill.less
@@ -0,0 +1,35 @@
+.s-input-fill {
+ --_if-bc: var(--bc-darker);
+ --_if-bg: var(--black-050);
+ --_if-blw: 0;
+ --_if-blr: 0;
+ --_if-brr: 0;
+ --_if-brw: 0;
+
+ &&__clear {
+ --_if-bc: transparent;
+ --_if-bg: transparent;
+ }
+
+ &.order-first {
+ --_if-blw: var(--su-static1);
+ --_if-blr: var(--br-sm);
+ }
+
+ &.order-last {
+ --_if-brw: var(--su-static1);
+ --_if-brr: var(--br-sm);
+ }
+
+ background-color: var(--_if-bg);
+ border: var(--su-static1) solid var(--_if-bc);
+ border-left-width: var(--_if-blw);
+ border-right-width: var(--_if-brw);
+ border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
+
+ color: var(--fc-medium);
+ font-family: inherit;
+ line-height: var(--lh-sm);
+ padding: 0.6em 0.7em;
+ white-space: nowrap;
+}
diff --git a/lib/components/input-icon/input-icon.less b/lib/components/input-icon/input-icon.less
new file mode 100644
index 0000000000..4e4d60b516
--- /dev/null
+++ b/lib/components/input-icon/input-icon.less
@@ -0,0 +1,45 @@
+.s-input-icon {
+ --_ii-fc: unset;
+ --_ii-r: 0.7em;
+
+ // MODIFIERS
+ .has-error & {
+ --_ii-fc: var(--red-400);
+ }
+
+ .has-success & {
+ --_ii-fc: var(--green-400);
+ }
+
+ .has-warning & {
+ --_ii-fc: var(--yellow-600);
+ }
+
+ .is-disabled & {
+ --_ii-fc: var(--black-400);
+ }
+
+ .is-readonly & {
+ --_ii-fc: var(--black-200);
+
+ .highcontrast-mode({
+ --_ii-fc: var(--fc-light);
+ });
+ }
+
+ &&__creditcard,
+ &&__search {
+ --_ii-r: auto;
+
+ color: var(--black-400);
+ left: 0.7em;
+ }
+
+ color: var(--_ii-fc);
+ right: var(--_ii-r);
+
+ margin-top: -9px; // Half the icon's height at 18px for centering;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+}
diff --git a/lib/components/input-message/input-message.less b/lib/components/input-message/input-message.less
new file mode 100644
index 0000000000..f236afb76b
--- /dev/null
+++ b/lib/components/input-message/input-message.less
@@ -0,0 +1,48 @@
+.s-input-message {
+ --_im-fc: unset;
+ --_im-a-fc: unset;
+ --_im-a-fc-hover: unset;
+
+ .input-states({
+ a {
+ text-decoration: underline;
+ }
+ });
+
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ opacity: var(--_o-disabled-static);
+ }
+
+ // MODIFIERS
+ .has-error & {
+ --_im-fc: var(--red-500);
+ --_im-a-fc: var(--red-800);
+ --_im-a-fc-hover: var(--red-900);
+ }
+
+ .has-success & {
+ --_im-fc: var(--green-500);
+ --_im-a-fc: var(--green-800);
+ --_im-a-fc-hover: var(--green-900);
+ }
+
+ .has-warning & {
+ --_im-fc: var(--yellow-800);
+ --_im-a-fc: var(--yellow-900);
+ }
+
+ // CHILD ELEMENTS
+ a {
+ &:hover {
+ color: var(--_im-a-fc-hover);
+ }
+
+ color: var(--_im-a-fc);
+ }
+
+ color: var(--_im-fc);
+
+ font-size: var(--fs-caption);
+ padding: var(--su2);
+}
diff --git a/lib/css/components/inputs.less b/lib/components/input_textarea/input_textarea.less
similarity index 59%
rename from lib/css/components/inputs.less
rename to lib/components/input_textarea/input_textarea.less
index 90f6de44d5..73a1a35c4d 100644
--- a/lib/css/components/inputs.less
+++ b/lib/components/input_textarea/input_textarea.less
@@ -164,134 +164,3 @@
top: 1.5em;
}
}
-
-// Other input-related elements
-.s-input-fill {
- --_if-bc: var(--bc-darker);
- --_if-bg: var(--black-050);
- --_if-blw: 0;
- --_if-blr: 0;
- --_if-brr: 0;
- --_if-brw: 0;
-
- &&__clear {
- --_if-bc: transparent;
- --_if-bg: transparent;
- }
-
- &.order-first {
- --_if-blw: var(--su-static1);
- --_if-blr: var(--br-sm);
- }
-
- &.order-last {
- --_if-brw: var(--su-static1);
- --_if-brr: var(--br-sm);
- }
-
- background-color: var(--_if-bg);
- border: var(--su-static1) solid var(--_if-bc);
- border-left-width: var(--_if-blw);
- border-right-width: var(--_if-brw);
- border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
-
- color: var(--fc-medium);
- font-family: inherit;
- line-height: var(--lh-sm);
- padding: 0.6em 0.7em;
- white-space: nowrap;
-}
-
-.s-input-icon {
- --_ii-fc: unset;
- --_ii-r: 0.7em;
-
- // MODIFIERS
- .has-error & {
- --_ii-fc: var(--red-400);
- }
-
- .has-success & {
- --_ii-fc: var(--green-400);
- }
-
- .has-warning & {
- --_ii-fc: var(--yellow-600);
- }
-
- .is-disabled & {
- --_ii-fc: var(--black-400);
- }
-
- .is-readonly & {
- --_ii-fc: var(--black-200);
-
- .highcontrast-mode({
- --_ii-fc: var(--fc-light);
- });
- }
-
- &&__creditcard,
- &&__search {
- --_ii-r: auto;
-
- color: var(--black-400);
- left: 0.7em;
- }
-
- color: var(--_ii-fc);
- right: var(--_ii-r);
-
- margin-top: -9px; // Half the icon's height at 18px for centering;
- pointer-events: none;
- position: absolute;
- top: 50%;
-}
-.s-input-message {
- --_im-fc: unset;
- --_im-a-fc: unset;
- --_im-a-fc-hover: unset;
-
- .input-states({
- a {
- text-decoration: underline;
- }
- });
-
- fieldset[disabled] & {
- cursor: not-allowed;
- opacity: var(--_o-disabled-static);
- }
-
- // MODIFIERS
- .has-error & {
- --_im-fc: var(--red-500);
- --_im-a-fc: var(--red-800);
- --_im-a-fc-hover: var(--red-900);
- }
-
- .has-success & {
- --_im-fc: var(--green-500);
- --_im-a-fc: var(--green-800);
- --_im-a-fc-hover: var(--green-900);
- }
-
- .has-warning & {
- --_im-fc: var(--yellow-800);
- --_im-a-fc: var(--yellow-900);
- }
-
- // CHILD ELEMENTS
- a {
- &:hover {
- color: var(--_im-a-fc-hover);
- }
-
- color: var(--_im-a-fc);
- }
-
- color: var(--_im-fc);
-
- font-size: var(--fs-caption);
- padding: var(--su2);
-}
diff --git a/lib/css/components/labels.less b/lib/components/label/label.less
similarity index 100%
rename from lib/css/components/labels.less
rename to lib/components/label/label.less
diff --git a/lib/css/components/link-previews.less b/lib/components/link-preview/link-preview.less
similarity index 100%
rename from lib/css/components/link-previews.less
rename to lib/components/link-preview/link-preview.less
diff --git a/lib/css/components/link.less b/lib/components/link/link.less
similarity index 100%
rename from lib/css/components/link.less
rename to lib/components/link/link.less
diff --git a/lib/css/components/menu.less b/lib/components/menu/menu.less
similarity index 100%
rename from lib/css/components/menu.less
rename to lib/components/menu/menu.less
diff --git a/lib/css/components/modals.less b/lib/components/modal/modal.less
similarity index 100%
rename from lib/css/components/modals.less
rename to lib/components/modal/modal.less
diff --git a/lib/ts/controllers/s-modal.ts b/lib/components/modal/modal.ts
similarity index 99%
rename from lib/ts/controllers/s-modal.ts
rename to lib/components/modal/modal.ts
index 9ad4b4d872..c6d25e0ccf 100644
--- a/lib/ts/controllers/s-modal.ts
+++ b/lib/components/modal/modal.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
export class ModalController extends Stacks.StacksController {
static targets = ["modal", "initialFocus"];
diff --git a/lib/css/components/navigation.less b/lib/components/navigation/navigation.less
similarity index 100%
rename from lib/css/components/navigation.less
rename to lib/components/navigation/navigation.less
diff --git a/lib/ts/controllers/s-navigation-tablist.ts b/lib/components/navigation/navigation.ts
similarity index 99%
rename from lib/ts/controllers/s-navigation-tablist.ts
rename to lib/components/navigation/navigation.ts
index c3fda10282..3bc9b068f1 100644
--- a/lib/ts/controllers/s-navigation-tablist.ts
+++ b/lib/components/navigation/navigation.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
export class TabListController extends Stacks.StacksController {
private boundSelectTab!: (event: MouseEvent) => void;
diff --git a/lib/css/components/notices.less b/lib/components/notice/notice.less
similarity index 65%
rename from lib/css/components/notices.less
rename to lib/components/notice/notice.less
index bff5cc1b5a..bc3c52d328 100644
--- a/lib/css/components/notices.less
+++ b/lib/components/notice/notice.less
@@ -194,51 +194,6 @@
font-size: var(--fs-body1);
}
-// Banner
-// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
-// This would reduce the amount of CSS we ship to the client and simplify our codebase
-.s-banner {
- --_no-x-offset: 0; // [1]
- .construct-notice-component(s-banner);
-
- &[aria-hidden="true"] { // If you want to hide and reveal the banner
- --_no-x-offset: calc(var(--su48) + var(--su2) * -1); // -50px
- opacity: 0;
- visibility: hidden;
- }
-
- &[aria-hidden="false"] {
- --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
- opacity: 1;
- visibility: visible;
- }
-
- &.is-pinned { // If you want to put the banner above the topbar
- z-index: calc(var(--zi-navigation-fixed) + 1);
- }
-
- &__body-pt {
- padding-top: 93px;
- }
-
- & &--container { // When we want to keep hero content capped
- margin: 0 auto;
- max-width: calc(var(--s-step) * 10);
- position: relative;
- width: 100%;
- }
-
- border-width: var(--su-static1) 0;
- inset: 0 0 auto 0;
- padding: var(--su12);
- position: fixed;
- -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
- transform: translate3d(0, var(--_no-x-offset), 0);
- width: 100%;
- z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-}
-
-// Notice
.s-notice {
.construct-notice-component(s-notice);
@@ -246,47 +201,3 @@
border-width: var(--su-static1);
padding: var(--su16);
}
-
-// Toast
-.s-toast {
- @media (prefers-reduced-motion) {
- transform: none !important;
- }
-
- &[aria-hidden="false"] {
- opacity: 1;
- transform: translate3d(0, 0, 0);
- transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
- visibility: visible;
- }
-
- .s-notice {
- box-shadow: var(--bs-sm);
- max-width: 44rem;
- padding-bottom: var(--su8);
- padding-top: var(--su8);
- pointer-events: all;
- width: 100%;
- }
-
- display: flex;
- justify-content: center;
- left: var(--su8);
- opacity: 0;
- pointer-events: none;
- position: fixed;
- right: var(--su8);
- top: var(--su16);
- transform: translate3d(0, -66px, 0);
- transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
- visibility: hidden;
- z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
-}
-
-// [1] When we use .s-banner, we need to adjust the padding-top on
-// the body tag. This class correctly adjusts the body padding ONLY if
-// the notice is one line. If it wraps to multiple lines, more classes or
-// (ideally) JS will need to be used to determine the notice's height
-// at the time of render. The padding value is determined like so:
-// 50px (top bar) + 44px (notice height) - 1px (bottom border)
-// The borders subtraction are necessary to neatly tuck everything together.
diff --git a/lib/css/components/page-titles.less b/lib/components/page-title/page-title.less
similarity index 100%
rename from lib/css/components/page-titles.less
rename to lib/components/page-title/page-title.less
diff --git a/lib/css/components/pagination.less b/lib/components/pagination/pagination.less
similarity index 100%
rename from lib/css/components/pagination.less
rename to lib/components/pagination/pagination.less
diff --git a/lib/css/components/popovers.less b/lib/components/popover/popover.less
similarity index 99%
rename from lib/css/components/popovers.less
rename to lib/components/popover/popover.less
index a00bb244ec..edf9c89cf3 100644
--- a/lib/css/components/popovers.less
+++ b/lib/components/popover/popover.less
@@ -30,6 +30,7 @@
&.is-visible {
--_po-d: block;
}
+
&&__tooltip {
--_po-wmn: unset;
--_po-w: auto;
diff --git a/lib/ts/controllers/s-popover.ts b/lib/components/popover/popover.ts
similarity index 99%
rename from lib/ts/controllers/s-popover.ts
rename to lib/components/popover/popover.ts
index 8897292ed3..b41a417efa 100644
--- a/lib/ts/controllers/s-popover.ts
+++ b/lib/components/popover/popover.ts
@@ -1,6 +1,6 @@
import { createPopper, Placement } from "@popperjs/core";
import type * as Popper from "@popperjs/core";
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
type OutsideClickBehavior =
| "always"
diff --git a/lib/test/s-tooltip.test.ts b/lib/components/popover/tooltip.test.ts
similarity index 79%
rename from lib/test/s-tooltip.test.ts
rename to lib/components/popover/tooltip.test.ts
index 7a0ad87f4d..4fd8fd2337 100644
--- a/lib/test/s-tooltip.test.ts
+++ b/lib/components/popover/tooltip.test.ts
@@ -1,11 +1,11 @@
import { html, fixture, expect } from "@open-wc/testing";
import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";
-import "../ts/index";
+import "../../index";
const user = userEvent.setup();
-describe("s-tooltip", () => {
+describe("tooltip", () => {
it("should make the tooltip element visible on hover (after a delay)", async () => {
const trigger = await fixture(html`
{
`);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(screen.queryByRole("tooltip")).to.be.null;
await user.hover(trigger);
const tooltip = await screen.findByRole("tooltip");
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(tooltip).to.be.visible;
await user.unhover(trigger);
@@ -54,9 +56,11 @@ describe("s-tooltip", () => {
await user.hover(button);
const tooltip = await screen.findByRole("tooltip");
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(tooltip).to.be.visible;
await user.hover(svg);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(tooltip).to.be.visible;
});
});
diff --git a/lib/ts/controllers/s-tooltip.ts b/lib/components/popover/tooltip.ts
similarity index 98%
rename from lib/ts/controllers/s-tooltip.ts
rename to lib/components/popover/tooltip.ts
index 1a97d5df44..0e29cacfb8 100644
--- a/lib/ts/controllers/s-tooltip.ts
+++ b/lib/components/popover/tooltip.ts
@@ -1,5 +1,5 @@
-import * as Stacks from "../stacks";
-import { BasePopoverController, PopoverController } from "./s-popover";
+import * as Stacks from "../../stacks";
+import { BasePopoverController, PopoverController } from "./popover";
export interface TooltipOptions {
placement: string;
diff --git a/lib/test/s-tooltip.visual.test.ts b/lib/components/popover/tooltip.visual.test.ts
similarity index 95%
rename from lib/test/s-tooltip.visual.test.ts
rename to lib/components/popover/tooltip.visual.test.ts
index f3c4c89ee3..c6fb7714c7 100644
--- a/lib/test/s-tooltip.visual.test.ts
+++ b/lib/components/popover/tooltip.visual.test.ts
@@ -2,11 +2,11 @@ import { html, fixture } from "@open-wc/testing";
import { screen } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";
import { visualDiff } from "@web/test-runner-visual-regression";
-import "../ts/index";
+import "../../index";
const user = userEvent.setup();
-describe("s-tooltip", () => {
+describe("tooltip", () => {
it("should not introduce visual regressions", async () => {
const wrapper = await fixture(html`
diff --git a/lib/css/components/post-summary.less b/lib/components/post-summary/post-summary.less
similarity index 100%
rename from lib/css/components/post-summary.less
rename to lib/components/post-summary/post-summary.less
diff --git a/lib/css/components/progress-bars.less b/lib/components/progress-bar/progress-bar.less
similarity index 100%
rename from lib/css/components/progress-bars.less
rename to lib/components/progress-bar/progress-bar.less
diff --git a/lib/css/components/prose.less b/lib/components/prose/prose.less
similarity index 100%
rename from lib/css/components/prose.less
rename to lib/components/prose/prose.less
diff --git a/lib/css/components/select.less b/lib/components/select/select.less
similarity index 100%
rename from lib/css/components/select.less
rename to lib/components/select/select.less
diff --git a/lib/css/components/sidebar-widgets.less b/lib/components/sidebar-widget/sidebar-widget.less
similarity index 99%
rename from lib/css/components/sidebar-widgets.less
rename to lib/components/sidebar-widget/sidebar-widget.less
index 70d62236b2..36f8c0b90c 100644
--- a/lib/css/components/sidebar-widgets.less
+++ b/lib/components/sidebar-widget/sidebar-widget.less
@@ -213,7 +213,6 @@
position: relative; // so that it's the positioning parent for the :after
}
-
// COLOR ALTERNATIVES
.alternate-color(@name) {
&.s-sidebarwidget__@{name} {
diff --git a/lib/css/components/spinner.less b/lib/components/spinner/spinner.less
similarity index 100%
rename from lib/css/components/spinner.less
rename to lib/components/spinner/spinner.less
diff --git a/lib/components/table-container/table-container.less b/lib/components/table-container/table-container.less
new file mode 100644
index 0000000000..fce702c961
--- /dev/null
+++ b/lib/components/table-container/table-container.less
@@ -0,0 +1,4 @@
+.s-table-container {
+ overflow-x: auto;
+ @scrollbar-styles();
+}
diff --git a/lib/css/components/table.less b/lib/components/table/table.less
similarity index 99%
rename from lib/css/components/table.less
rename to lib/components/table/table.less
index fc11a794a9..b0b8efe21e 100644
--- a/lib/css/components/table.less
+++ b/lib/components/table/table.less
@@ -1,8 +1,3 @@
-.s-table-container {
- overflow-x: auto;
- @scrollbar-styles();
-}
-
.s-table {
@ta-cell-border: var(--su-static1) solid var(--bc-medium);
@ta-columns: (100% / 12);
diff --git a/lib/ts/controllers/s-table.ts b/lib/components/table/table.ts
similarity index 99%
rename from lib/ts/controllers/s-table.ts
rename to lib/components/table/table.ts
index 5a5a988864..22d45ad9d8 100644
--- a/lib/ts/controllers/s-table.ts
+++ b/lib/components/table/table.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
export class TableController extends Stacks.StacksController {
static targets = ["column"];
diff --git a/lib/css/components/tags.less b/lib/components/tag/tag.less
similarity index 100%
rename from lib/css/components/tags.less
rename to lib/components/tag/tag.less
diff --git a/lib/components/toast/toast.less b/lib/components/toast/toast.less
new file mode 100644
index 0000000000..7f5ee03463
--- /dev/null
+++ b/lib/components/toast/toast.less
@@ -0,0 +1,35 @@
+// See also ./lib/components/notice/notice.less
+.s-toast {
+ @media (prefers-reduced-motion) {
+ transform: none !important;
+ }
+
+ &[aria-hidden="false"] {
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
+ visibility: visible;
+ }
+
+ .s-notice {
+ box-shadow: var(--bs-sm);
+ max-width: 44rem;
+ padding-bottom: var(--su8);
+ padding-top: var(--su8);
+ pointer-events: all;
+ width: 100%;
+ }
+
+ display: flex;
+ justify-content: center;
+ left: var(--su8);
+ opacity: 0;
+ pointer-events: none;
+ position: fixed;
+ right: var(--su8);
+ top: var(--su16);
+ transform: translate3d(0, -66px, 0);
+ transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
+ visibility: hidden;
+ z-index: calc(var(--zi-modals) + 1); // Toasts should appear above modals
+}
diff --git a/lib/test/s-toast.test.ts b/lib/components/toast/toast.test.ts
similarity index 77%
rename from lib/test/s-toast.test.ts
rename to lib/components/toast/toast.test.ts
index 980a507ae1..113a8b5ba9 100644
--- a/lib/test/s-toast.test.ts
+++ b/lib/components/toast/toast.test.ts
@@ -1,8 +1,8 @@
import { html, fixture, expect } from "@open-wc/testing";
import { screen } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";
-import "../ts/index";
-import { showToast, hideToast } from "../ts/index";
+import "../../index";
+import { showToast, hideToast } from "../../controllers";
const user = userEvent.setup();
@@ -30,17 +30,19 @@ const testToast = (hidden = true) => html`
`;
-describe("s-toast", () => {
+describe("toast", () => {
it("trigger should make toast visible", async () => {
await fixture(testToast(true));
const button = screen.getAllByRole("button")[0]; // Trigger button
const toast = screen.getByTestId("test-toast");
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(toast).to.have.attribute("aria-hidden", "true");
button.addEventListener("click", () => showToast(toast));
await user.click(button);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(toast).to.have.attribute("aria-hidden", "false");
});
@@ -50,10 +52,12 @@ describe("s-toast", () => {
const button = screen.getAllByRole("button")[1]; // Close button
const toast = screen.getByTestId("test-toast");
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(toast).to.have.attribute("aria-hidden", "false");
button.addEventListener("click", () => hideToast(toast));
await user.click(button);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
expect(toast).to.have.attribute("aria-hidden", "true");
});
diff --git a/lib/ts/controllers/s-toast.ts b/lib/components/toast/toast.ts
similarity index 99%
rename from lib/ts/controllers/s-toast.ts
rename to lib/components/toast/toast.ts
index 9752d956e1..21868e582a 100644
--- a/lib/ts/controllers/s-toast.ts
+++ b/lib/components/toast/toast.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
export class ToastController extends Stacks.StacksController {
static targets = ["toast", "initialFocus"];
diff --git a/lib/test/s-toast.visual.test.ts b/lib/components/toast/toast.visual.test.ts
similarity index 85%
rename from lib/test/s-toast.visual.test.ts
rename to lib/components/toast/toast.visual.test.ts
index f06a8fa9a2..8ec45720bc 100644
--- a/lib/test/s-toast.visual.test.ts
+++ b/lib/components/toast/toast.visual.test.ts
@@ -1,8 +1,8 @@
-import { runComponentTests } from "./test-utils";
+import { runComponentTests } from "../../test/test-utils";
import { html } from "@open-wc/testing";
-import "../ts/index";
+import "../../index";
-describe("s-toast > s-notice", () => {
+describe("toast > notice", () => {
// This is a test of notice component wrapped in a toast component
runComponentTests({
type: "visual",
diff --git a/lib/css/components/toggle-switches.less b/lib/components/toggle-switch/toggle-switch.less
similarity index 100%
rename from lib/css/components/toggle-switches.less
rename to lib/components/toggle-switch/toggle-switch.less
diff --git a/lib/css/components/topbar.less b/lib/components/topbar/topbar.less
similarity index 100%
rename from lib/css/components/topbar.less
rename to lib/components/topbar/topbar.less
diff --git a/lib/css/components/uploader.less b/lib/components/uploader/uploader.less
similarity index 100%
rename from lib/css/components/uploader.less
rename to lib/components/uploader/uploader.less
diff --git a/lib/ts/controllers/s-uploader.ts b/lib/components/uploader/uploader.ts
similarity index 99%
rename from lib/ts/controllers/s-uploader.ts
rename to lib/components/uploader/uploader.ts
index 6c367a74f0..1f47564c2e 100644
--- a/lib/ts/controllers/s-uploader.ts
+++ b/lib/components/uploader/uploader.ts
@@ -1,4 +1,4 @@
-import * as Stacks from "../stacks";
+import * as Stacks from "../../stacks";
interface FilePreview {
data?: string | ArrayBuffer;
diff --git a/lib/css/components/user-cards.less b/lib/components/user-card/user-card.less
similarity index 100%
rename from lib/css/components/user-cards.less
rename to lib/components/user-card/user-card.less
diff --git a/lib/controllers.ts b/lib/controllers.ts
new file mode 100644
index 0000000000..1210871488
--- /dev/null
+++ b/lib/controllers.ts
@@ -0,0 +1,33 @@
+// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
+export {
+ BannerController,
+ hideBanner,
+ showBanner,
+} from "./components/banner/banner";
+export { ExpandableController } from "./components/expandable/expandable";
+export {
+ ModalController,
+ hideModal,
+ showModal,
+} from "./components/modal/modal";
+export { TabListController } from "./components/navigation/navigation";
+export {
+ attachPopover,
+ detachPopover,
+ hidePopover,
+ BasePopoverController,
+ PopoverController,
+ showPopover,
+} from "./components/popover/popover";
+export { TableController } from "./components/table/table";
+export {
+ ToastController,
+ hideToast,
+ showToast,
+} from "./components/toast/toast";
+export {
+ setTooltipHtml,
+ setTooltipText,
+ TooltipController,
+} from "./components/popover/tooltip";
+export { UploaderController } from "./components/uploader/uploader";
diff --git a/lib/css/stacks-static.less b/lib/css/stacks-static.less
deleted file mode 100644
index e07ef5580d..0000000000
--- a/lib/css/stacks-static.less
+++ /dev/null
@@ -1,87 +0,0 @@
-// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
-// BASE
-@import "base/reset.less";
-@import "base/fieldset.less";
-@import "base/icons.less";
-@import "input-utils.less";
-
-// COMPONENTS
-@import "components/activity-indicator.less";
-@import "components/anchors.less";
-@import "components/award-bling.less";
-@import "components/avatars.less";
-@import "components/badges.less";
-@import "components/buttons.less";
-@import "components/empty-states.less";
-@import "components/block-link.less";
-@import "components/breadcrumbs.less";
-@import "components/button-groups.less";
-@import "components/cards.less";
-@import "components/checkboxes-radios.less";
-@import "components/code-blocks.less";
-@import "components/description.less";
-@import "components/expandable.less";
-@import "components/inputs.less";
-@import "components/labels.less";
-@import "components/link.less";
-@import "components/link-previews.less";
-@import "components/menu.less";
-@import "components/modals.less";
-@import "components/navigation.less";
-@import "components/notices.less";
-@import "components/page-titles.less";
-@import "components/pagination.less";
-@import "components/popovers.less";
-@import "components/post-summary.less";
-@import "components/progress-bars.less";
-@import "components/prose.less";
-@import "components/select.less";
-@import "components/sidebar-widgets.less";
-@import "components/spinner.less";
-@import "components/table.less";
-@import "components/tags.less";
-@import "components/toggle-switches.less";
-@import "components/topbar.less";
-@import "components/uploader.less";
-@import "components/user-cards.less";
-
-// LESS CONSTANTS AND MIXINS
-@import "exports/exports.less";
-
-// ATOMIC CLASSES
-@import "atomic/borders.less";
-@import "atomic/colors.less";
-@import "atomic/flex.less";
-@import "atomic/gap.less";
-@import "atomic/grid.less";
-@import "atomic/spacing.less";
-@import "atomic/typography.less";
-@import "atomic/misc.less";
-@import "atomic/width-height.less";
-
-/* stylelint-disable */
-#stacks-internals #screen-lg({
- #stacks-internals-collect-large();
-});
-#stacks-internals #screen-md({
- #stacks-internals-collect-medium();
-});
-#stacks-internals #screen-sm({
- #stacks-internals-collect-small();
-});
-
-@media print { // We need printing styles to be last so they can override all other styles.
- .print\:d-block & {
- display: block !important;
- }
- .print\:d-none & {
- display: none !important;
- }
-}
-/* stylelint-enable */
-
-// CONFIG
-@import "base/configuration-static.less";
-@import "base/internals.less";
-
-// [1] The following items are elements which we DO NOT allow communities to modify via variables.
diff --git a/lib/css/exports/constants-colors.less b/lib/exports/constants-colors.less
similarity index 100%
rename from lib/css/exports/constants-colors.less
rename to lib/exports/constants-colors.less
diff --git a/lib/css/exports/constants-helpers.less b/lib/exports/constants-helpers.less
similarity index 100%
rename from lib/css/exports/constants-helpers.less
rename to lib/exports/constants-helpers.less
diff --git a/lib/css/exports/constants-type.less b/lib/exports/constants-type.less
similarity index 100%
rename from lib/css/exports/constants-type.less
rename to lib/exports/constants-type.less
diff --git a/lib/css/exports/exports.less b/lib/exports/exports.less
similarity index 100%
rename from lib/css/exports/exports.less
rename to lib/exports/exports.less
diff --git a/lib/css/exports/mixins.less b/lib/exports/mixins.less
similarity index 100%
rename from lib/css/exports/mixins.less
rename to lib/exports/mixins.less
diff --git a/lib/ts/index.ts b/lib/index.ts
similarity index 97%
rename from lib/ts/index.ts
rename to lib/index.ts
index df135fecd8..081bbe27a5 100644
--- a/lib/ts/index.ts
+++ b/lib/index.ts
@@ -1,4 +1,4 @@
-import "../css/stacks.less";
+import "./stacks.less";
import {
BannerController,
ExpandableController,
diff --git a/lib/css/input-utils.less b/lib/input-utils.less
similarity index 100%
rename from lib/css/input-utils.less
rename to lib/input-utils.less
diff --git a/lib/css/stacks-dynamic.less b/lib/stacks-dynamic.less
similarity index 96%
rename from lib/css/stacks-dynamic.less
rename to lib/stacks-dynamic.less
index 2c4066c65d..bab3ca5371 100644
--- a/lib/css/stacks-dynamic.less
+++ b/lib/stacks-dynamic.less
@@ -16,10 +16,9 @@
// ----------------------------------------------------------------------------
// -- SET BASIC STYLES FOR BODY
@import "base/body.less";
-
// -- LESS CONSTANTS AND MIXINS
@import "exports/exports.less";
// -- CONFIG
@import "base/configuration-static.less";
-@import "base/internals.less";
+@import "base/internal.less";
diff --git a/lib/stacks-static.less b/lib/stacks-static.less
new file mode 100644
index 0000000000..327bff760d
--- /dev/null
+++ b/lib/stacks-static.less
@@ -0,0 +1,93 @@
+// stacks-static.less contains styles which we DO NOT allow communities to modify via variables
+// BASE
+@import "base/reset.less";
+@import "base/fieldset.less";
+@import "base/icon.less";
+@import "input-utils.less";
+
+// -- COMPONENTS
+@import "components/activity-indicator/activity-indicator.less";
+@import "components/anchor/anchor.less";
+@import "components/avatar/avatar.less";
+@import "components/award-bling/award-bling.less";
+@import "components/badge/badge.less";
+@import "components/banner/banner.less";
+@import "components/block-link/block-link.less";
+@import "components/breadcrumbs/breadcrumbs.less";
+@import "components/button/button.less";
+@import "components/button-group/button-group.less";
+@import "components/card/card.less";
+@import "components/check-control/check-control.less";
+@import "components/check-group/check-group.less";
+@import "components/checkbox_radio/checkbox_radio.less";
+@import "components/code-block/code-block.less";
+@import "components/description/description.less";
+@import "components/empty-state/empty-state.less";
+@import "components/expandable/expandable.less";
+@import "components/input_textarea/input_textarea.less";
+@import "components/input-fill/input-fill.less";
+@import "components/input-icon/input-icon.less";
+@import "components/input-message/input-message.less";
+@import "components/label/label.less";
+@import "components/link/link.less";
+@import "components/link-preview/link-preview.less";
+@import "components/menu/menu.less";
+@import "components/modal/modal.less";
+@import "components/navigation/navigation.less";
+@import "components/notice/notice.less";
+@import "components/page-title/page-title.less";
+@import "components/pagination/pagination.less";
+@import "components/popover/popover.less";
+@import "components/post-summary/post-summary.less";
+@import "components/progress-bar/progress-bar.less";
+@import "components/prose/prose.less";
+@import "components/select/select.less";
+@import "components/sidebar-widget/sidebar-widget.less";
+@import "components/spinner/spinner.less";
+@import "components/table/table.less";
+@import "components/table-container/table-container.less";
+@import "components/tag/tag.less";
+@import "components/toast/toast.less";
+@import "components/toggle-switch/toggle-switch.less";
+@import "components/topbar/topbar.less";
+@import "components/uploader/uploader.less";
+@import "components/user-card/user-card.less";
+
+// LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+// -- ATOMIC CLASSES
+@import "atomic/border.less";
+@import "atomic/color.less";
+@import "atomic/flex.less";
+@import "atomic/gap.less";
+@import "atomic/grid.less";
+@import "atomic/spacing.less";
+@import "atomic/typography.less";
+@import "atomic/misc.less";
+@import "atomic/width-height.less";
+
+/* stylelint-disable */
+#stacks-internals #screen-lg({
+ #stacks-internals-collect-large();
+});
+#stacks-internals #screen-md({
+ #stacks-internals-collect-medium();
+});
+#stacks-internals #screen-sm({
+ #stacks-internals-collect-small();
+});
+
+@media print { // We need printing styles to be last so they can override all other styles.
+ .print\:d-block & {
+ display: block !important;
+ }
+ .print\:d-none & {
+ display: none !important;
+ }
+}
+/* stylelint-enable */
+
+// CONFIG
+@import "base/configuration-static.less";
+@import "base/internal.less";
diff --git a/lib/css/stacks.less b/lib/stacks.less
similarity index 100%
rename from lib/css/stacks.less
rename to lib/stacks.less
diff --git a/lib/ts/stacks.ts b/lib/stacks.ts
similarity index 100%
rename from lib/ts/stacks.ts
rename to lib/stacks.ts
diff --git a/lib/test/s-avatar.a11y.test.ts b/lib/test/s-avatar.a11y.test.ts
deleted file mode 100644
index 815af51ca8..0000000000
--- a/lib/test/s-avatar.a11y.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { runComponentTests } from "./test-utils";
-import "../ts/index";
-
-const getChild = (child) => {
- const srEl = `Stack Overflow `;
- switch (child) {
- case "image":
- return ` ${srEl}`;
- case "letter":
- return `
- S
-
${srEl}`;
- default:
- return srEl;
- }
-};
-
-describe("s-avatar", () => {
- runComponentTests({
- type: "a11y",
- baseClass: "s-avatar",
- variants: ["24", "32", "48", "64", "96", "128"],
- children: {
- default: getChild(""),
- image: getChild("image"),
- letter: getChild("letter"),
- },
- tag: "span",
- });
-});
diff --git a/lib/ts/controllers/index.ts b/lib/ts/controllers/index.ts
deleted file mode 100644
index 41f17727ee..0000000000
--- a/lib/ts/controllers/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
-export { ExpandableController } from "./s-expandable-control";
-export { hideModal, ModalController, showModal } from "./s-modal";
-export { hideBanner, BannerController, showBanner } from "./s-banner";
-export { hideToast, ToastController, showToast } from "./s-toast";
-export { TabListController } from "./s-navigation-tablist";
-export {
- attachPopover,
- detachPopover,
- hidePopover,
- BasePopoverController,
- PopoverController,
- showPopover,
-} from "./s-popover";
-export { TableController } from "./s-table";
-export { setTooltipHtml, setTooltipText, TooltipController } from "./s-tooltip";
-export { UploaderController } from "./s-uploader";
diff --git a/lib/tsconfig.json b/lib/tsconfig.json
index d0709db6d7..fc88f8d30e 100644
--- a/lib/tsconfig.json
+++ b/lib/tsconfig.json
@@ -9,5 +9,5 @@
"skipLibCheck": true,
"declaration": true
},
- "include": ["ts/**/*", "test/test-utils.ts"]
+ "include": ["**/*.ts"]
}
diff --git a/package.json b/package.json
index 9fdee15e9f..8c9b3173ca 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
"main": "./dist/js/stacks.js",
"types": "./dist/index.d.ts",
"style": "./dist/css/stacks.css",
- "less": "./lib/css/stacks.less",
+ "less": "./lib/stacks.less",
"unpkg": "dist/css/stacks.min.css",
"scripts": {
"start": "concurrently -n w: npm:start:*",
@@ -30,8 +30,8 @@
"test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
"prepublishOnly": "npm run build",
"lint": "concurrently -n w: npm:lint:*",
- "lint:ts": "eslint ./lib/ts",
- "lint:css": "stylelint ./lib/css",
+ "lint:ts": "eslint ./lib/**/*.ts",
+ "lint:css": "stylelint ./lib/*",
"lint:format": "prettier --check ./lib"
},
"license": "MIT",
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-128-image.png b/screenshots/Chromium/baseline/s-avatar-dark-128-image.png
new file mode 100644
index 0000000000..e1ad16ef05
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:816fc7fc8198350ce25b03c8c4eb0c70bc3c8c13b43798fa7f8f20f4ecf243e3
+size 3778
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-128.png b/screenshots/Chromium/baseline/s-avatar-dark-128.png
new file mode 100644
index 0000000000..fb758ceba5
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bc2371d1a2ff2a8a782de8d88a486164844a76abba697eaa739231ae38eb46fc
+size 927
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-24-image.png b/screenshots/Chromium/baseline/s-avatar-dark-24-image.png
new file mode 100644
index 0000000000..cad348fac1
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:62e29c3dacb826f888d3ec0c7c871b2b6d0be19fe7a796a66a0a6c00d38ccfce
+size 902
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-24.png b/screenshots/Chromium/baseline/s-avatar-dark-24.png
new file mode 100644
index 0000000000..20827d9843
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e36249743bee0ffbcf3a70715e1f3caa37b4932feb6be6694ad82725766ce395
+size 486
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-32-image.png b/screenshots/Chromium/baseline/s-avatar-dark-32-image.png
new file mode 100644
index 0000000000..2bd8245d4e
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a99036e0a208a665cfe39c17a622f284dd96b7488d9020a73b66098b86cf9593
+size 1217
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-32.png b/screenshots/Chromium/baseline/s-avatar-dark-32.png
new file mode 100644
index 0000000000..eafe8d53c3
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:287b9213556b8aa15a8dec26fc30229350ee6e2592d6200f1b6694044a07cae9
+size 520
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-48-image.png b/screenshots/Chromium/baseline/s-avatar-dark-48-image.png
new file mode 100644
index 0000000000..643978ce19
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a48d2be5d30d6fbaf6db37fd09fc88ff4b0aad1a5026b1366efbe3803f7925e4
+size 1509
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-48.png b/screenshots/Chromium/baseline/s-avatar-dark-48.png
new file mode 100644
index 0000000000..4b64f426bf
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:794a2ae689b5164e3df482cbf13047066c0e8fe6cc98135a9cb6e24d8cd14279
+size 589
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-64-image.png b/screenshots/Chromium/baseline/s-avatar-dark-64-image.png
new file mode 100644
index 0000000000..bbc14b19ec
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0e9f49888737b65f428e89faaa344101dc423950fd547e6e41eb05e70950e733
+size 2049
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-64.png b/screenshots/Chromium/baseline/s-avatar-dark-64.png
new file mode 100644
index 0000000000..25cec68127
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4343bd623fca8382e4761e3bd1a98d6bc3b674ed4ab2e426d4b8910c6ff535ba
+size 625
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-96-image.png b/screenshots/Chromium/baseline/s-avatar-dark-96-image.png
new file mode 100644
index 0000000000..7deac64776
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:929279175d7644e6344ee5e3def89ecbe207419bef3d353cf32902d15b3da652
+size 2665
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-96.png b/screenshots/Chromium/baseline/s-avatar-dark-96.png
new file mode 100644
index 0000000000..8c452e6022
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:23c89925bdd5344ef51d1fbde65361723bf88426ddd0bab73d3f59fad23109c7
+size 812
diff --git a/screenshots/Chromium/baseline/s-avatar-dark-image.png b/screenshots/Chromium/baseline/s-avatar-dark-image.png
new file mode 100644
index 0000000000..97def7c186
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2dca8d1063eb05d54dc529e6d7443f8d391159f28ea150f3e56ae0c262f71a75
+size 787
diff --git a/screenshots/Chromium/baseline/s-avatar-dark.png b/screenshots/Chromium/baseline/s-avatar-dark.png
new file mode 100644
index 0000000000..0eed03127d
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a8bcb53178c7e7aee4e021f4c9c09657ea8a5a7b2861166a8cad36d8f62739d6
+size 488
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128-image.png
new file mode 100644
index 0000000000..9d11d8f3ff
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cd7787c4c222f1e96b4b110c81eb016faf092363b3c4d1c6852cbc10df1d494
+size 3852
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128.png
new file mode 100644
index 0000000000..13983d2129
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ccf367c95a0fbdf912c897ef01b7cefe682662075c347121c1ee9463fc43c8cb
+size 1043
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24-image.png
new file mode 100644
index 0000000000..2e64cc110c
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a1b3fcad6270cabe07dc81c169965ec43d3cdd391e01183b33374c3b067b550f
+size 1001
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24.png
new file mode 100644
index 0000000000..5d1f853cf4
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79fe6d4c54ce1e524faacd2e205079a3b7ba64b4ea0ac4fa0a7cf9005f5d3e55
+size 478
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32-image.png
new file mode 100644
index 0000000000..59ee2c8998
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e596020ef8cc8cec9558ad9e7bddde8a1050cb77d850ff0da1699aa9a050da3
+size 1346
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32.png
new file mode 100644
index 0000000000..86f8d0d525
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:53f412de08e1b83be2399c3e8fef3ed8a42f66519adc074745715419566e425a
+size 545
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48-image.png
new file mode 100644
index 0000000000..8916e7e7c8
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:856f468aa6e78a197570308f478e6859639e2148003493cbf7298e3b4d600d9d
+size 1600
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48.png
new file mode 100644
index 0000000000..21805e2dad
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31e5fb0a97711c10653ae3e65f83fa24e93c9fca09d63d2be720e79f8513f800
+size 586
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64-image.png
new file mode 100644
index 0000000000..48a1f240bc
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:849880f947f6aa76fabc9aa35ee9828f526ec37c094d50496cc32d6dd3d4b6fa
+size 2170
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64.png
new file mode 100644
index 0000000000..eb74844241
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5a4e2c8873d517d39957e985db35f232273d2db3f530b5f21120d837bf051e8
+size 704
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96-image.png
new file mode 100644
index 0000000000..6bb4274013
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:68acefa90ad0930b0e3c5269bffae03eb6ed0c5d80455f08d2d73ca523e09abb
+size 2846
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96.png
new file mode 100644
index 0000000000..b2d84f7a2b
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c774312c360c1579ce7c0aa46137b563b72b1b0c42df9e6f278f6d7691980620
+size 892
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-image.png
new file mode 100644
index 0000000000..b371f164fc
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0daa580b82c63eaa8b2dad743f3652562fa2d7d7252464c992ea76e43a1131c0
+size 879
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-dark.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark.png
new file mode 100644
index 0000000000..12d6bb9c53
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d90fe227abb5225f4c9d2626f389110f71c7d6209d6eec758ab0523c0842d621
+size 472
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128-image.png
new file mode 100644
index 0000000000..b9867c8b8b
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4bd40004e50f705f0347b7b64cc1315cd962d8b716460d863ec64695e1ee2b79
+size 3854
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128.png
new file mode 100644
index 0000000000..5adb986dda
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec9aac9e3d5cff5b7c34abf0c5c98aab924f3f9d9d8dbbe963a3cd3276700113
+size 971
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24-image.png
new file mode 100644
index 0000000000..a02cb7505c
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9b6d2600705954dca9dfe62f6de9c808d394c10991426e8b6de8a294ed8dca28
+size 999
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24.png
new file mode 100644
index 0000000000..c836e43d38
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d20e526ccfb5cb9bfcef789880637415b294dde50c44bb27d3e85a910264565
+size 490
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32-image.png
new file mode 100644
index 0000000000..e2e7199de2
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b99357398905c79fa5712ad37b69bee12dbb7d5187c3aebdf0e04ce91c7dd13e
+size 1331
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32.png
new file mode 100644
index 0000000000..227c4bde7e
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6bcf47735f36b83f1d449cb9ea82963f2daf607ec23ab410cf101fc3225d164c
+size 545
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48-image.png
new file mode 100644
index 0000000000..2244562bc6
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a5e3c2721e550e6bd58a8a94a843a278a2577de8863ecac2a1dec07f664f053
+size 1606
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48.png
new file mode 100644
index 0000000000..0a2f03a7b6
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:990dbd160e868889e0747acce6e9d821a680189f574e0b7446987936caa59015
+size 598
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64-image.png
new file mode 100644
index 0000000000..2d2b18af66
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:72ffcdd3c98c2c5ad31311885953845d1865fcdb8cb6e2e7adca8042f979dd04
+size 2182
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64.png
new file mode 100644
index 0000000000..bf849fd842
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:613a512224ea2d055eccc2ab3ea14c20b7860ac5d4a952db15b5e4124464a024
+size 693
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96-image.png
new file mode 100644
index 0000000000..305d0c0368
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c8dee9aa94501ab43cdc034cde0f0108ced50d80c4aad19a5f1c2be0c2c63be7
+size 2865
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96.png
new file mode 100644
index 0000000000..d707419acf
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ea9605f9b5e2686c030d6feb8b2e7fe1361e8caae8dc043a72fe990fe7932389
+size 847
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light-image.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-image.png
new file mode 100644
index 0000000000..89a3896bc2
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:060e5c08252755250aaf87b442d9113b33135847af7c28bbf5ca01c2385112d0
+size 864
diff --git a/screenshots/Chromium/baseline/s-avatar-highcontrast-light.png b/screenshots/Chromium/baseline/s-avatar-highcontrast-light.png
new file mode 100644
index 0000000000..a5d8120f19
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf8abcabe504fc3f77bd00ec15bb3eaccd4bd4ec3edee817e75af3750ecee7fc
+size 491
diff --git a/screenshots/Chromium/baseline/s-avatar-light-128-image.png b/screenshots/Chromium/baseline/s-avatar-light-128-image.png
new file mode 100644
index 0000000000..294924c5b7
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c55dbcea547ab924ea0884a73dcb9bdba091b2c5c040dbc60a13f488a201abe
+size 3491
diff --git a/screenshots/Chromium/baseline/s-avatar-light-128.png b/screenshots/Chromium/baseline/s-avatar-light-128.png
new file mode 100644
index 0000000000..b4262c05f9
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:324ab22453fa9c5c9a49565196cd78613430e2ca9844b4836500903919405579
+size 445
diff --git a/screenshots/Chromium/baseline/s-avatar-light-24-image.png b/screenshots/Chromium/baseline/s-avatar-light-24-image.png
new file mode 100644
index 0000000000..3e90542888
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e817eeb1833d79664ec2c230f92832543afb5d2bb4a016ce2d1506b63a6bf2b5
+size 887
diff --git a/screenshots/Chromium/baseline/s-avatar-light-24.png b/screenshots/Chromium/baseline/s-avatar-light-24.png
new file mode 100644
index 0000000000..3a8af2d793
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c443db14b5a8dbf96eb5d2f29828a8ebb9723518c6459cde8fa3378630fe3934
+size 341
diff --git a/screenshots/Chromium/baseline/s-avatar-light-32-image.png b/screenshots/Chromium/baseline/s-avatar-light-32-image.png
new file mode 100644
index 0000000000..8ec184c89f
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40506e61605b093aacf90ca569754fe173d36f3c2c08e7817878dd9a4b77bdc3
+size 1194
diff --git a/screenshots/Chromium/baseline/s-avatar-light-32.png b/screenshots/Chromium/baseline/s-avatar-light-32.png
new file mode 100644
index 0000000000..3a8af2d793
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c443db14b5a8dbf96eb5d2f29828a8ebb9723518c6459cde8fa3378630fe3934
+size 341
diff --git a/screenshots/Chromium/baseline/s-avatar-light-48-image.png b/screenshots/Chromium/baseline/s-avatar-light-48-image.png
new file mode 100644
index 0000000000..1aee95b04a
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47fa6055e619cfbb61ef781eb728a46d81f6535c01c59e142294396509712d22
+size 1453
diff --git a/screenshots/Chromium/baseline/s-avatar-light-48.png b/screenshots/Chromium/baseline/s-avatar-light-48.png
new file mode 100644
index 0000000000..3a8af2d793
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c443db14b5a8dbf96eb5d2f29828a8ebb9723518c6459cde8fa3378630fe3934
+size 341
diff --git a/screenshots/Chromium/baseline/s-avatar-light-64-image.png b/screenshots/Chromium/baseline/s-avatar-light-64-image.png
new file mode 100644
index 0000000000..fff6a302d6
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8032171c0575602c604d1f64ac483d061d58aa097f4941496658981833872fcf
+size 1929
diff --git a/screenshots/Chromium/baseline/s-avatar-light-64.png b/screenshots/Chromium/baseline/s-avatar-light-64.png
new file mode 100644
index 0000000000..3a8af2d793
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c443db14b5a8dbf96eb5d2f29828a8ebb9723518c6459cde8fa3378630fe3934
+size 341
diff --git a/screenshots/Chromium/baseline/s-avatar-light-96-image.png b/screenshots/Chromium/baseline/s-avatar-light-96-image.png
new file mode 100644
index 0000000000..075a77955a
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f6b26a5e310063ced4f8499c54c528d4a667859048c6d6d7ac225d6fc6133488
+size 2488
diff --git a/screenshots/Chromium/baseline/s-avatar-light-96.png b/screenshots/Chromium/baseline/s-avatar-light-96.png
new file mode 100644
index 0000000000..6c884c5b86
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf5620f2162a4f7a6195c723dcb069a9ce24d75dfa2b9324f5da0e079e6ddbe3
+size 353
diff --git a/screenshots/Chromium/baseline/s-avatar-light-image.png b/screenshots/Chromium/baseline/s-avatar-light-image.png
new file mode 100644
index 0000000000..f37c0f70e6
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:97fe67021b018edb4ba126809e34616588bcb54789cca71c94d651295b3cdb02
+size 767
diff --git a/screenshots/Chromium/baseline/s-avatar-light.png b/screenshots/Chromium/baseline/s-avatar-light.png
new file mode 100644
index 0000000000..3a8af2d793
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-avatar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c443db14b5a8dbf96eb5d2f29828a8ebb9723518c6459cde8fa3378630fe3934
+size 341
diff --git a/screenshots/Chromium/baseline/s-btn-is-loading.png b/screenshots/Chromium/baseline/s-btn-is-loading.png
deleted file mode 100644
index 41907f213f..0000000000
--- a/screenshots/Chromium/baseline/s-btn-is-loading.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7eda928662dd5c59d5e4b3b3a4b9aa39f355af9a5fd58c358c56f082100217f8
-size 1570
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-128-image.png b/screenshots/Firefox/baseline/s-avatar-dark-128-image.png
new file mode 100644
index 0000000000..ccbd362bbe
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fd022692b5d0352eb9eeda98b6ba565205fdc0ebf5467ceb55c6ceba42d0fcd
+size 6069
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-128.png b/screenshots/Firefox/baseline/s-avatar-dark-128.png
new file mode 100644
index 0000000000..77fcf53369
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c23a6bf7d2cfcd1389e36e74f048d319431140c66910aa23ba466355ffffe47
+size 1263
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-24-image.png b/screenshots/Firefox/baseline/s-avatar-dark-24-image.png
new file mode 100644
index 0000000000..ea879c2290
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d839d860e0652d41fbd537344ed0af11dc0547d0b7a906ecd5cc490c6331c6cc
+size 1363
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-24.png b/screenshots/Firefox/baseline/s-avatar-dark-24.png
new file mode 100644
index 0000000000..55f1d5ec39
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:03c20e98d0bf517c5751a58bc2667efeff179c757db31f5d275047e1858820e4
+size 598
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-32-image.png b/screenshots/Firefox/baseline/s-avatar-dark-32-image.png
new file mode 100644
index 0000000000..ef0d3a084d
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5ad0cab9030518c5d87637ea4a8cf8ef1f924fa7e562ef64ebfe07af6b2eda5e
+size 1700
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-32.png b/screenshots/Firefox/baseline/s-avatar-dark-32.png
new file mode 100644
index 0000000000..08bd48a8f7
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f59d0c06876b47e4dee149a165e80695dfe7eb7485213179d4dc9df22356431f
+size 652
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-48-image.png b/screenshots/Firefox/baseline/s-avatar-dark-48-image.png
new file mode 100644
index 0000000000..20cc0594da
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:744ba141616484c513e7ac3c01c67d0d123ac0437dafc7b103ac7eca5ce22c23
+size 2227
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-48.png b/screenshots/Firefox/baseline/s-avatar-dark-48.png
new file mode 100644
index 0000000000..0332c6dee4
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b23a31d3bf89a1fe166cd0dacb25b89f820592eba4c9135d3183735e7c3b511d
+size 696
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-64-image.png b/screenshots/Firefox/baseline/s-avatar-dark-64-image.png
new file mode 100644
index 0000000000..9523ce253c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f622e223a2f8bc571f0629e2d7799b5784147969d6834a18e04494f71e66f31
+size 2976
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-64.png b/screenshots/Firefox/baseline/s-avatar-dark-64.png
new file mode 100644
index 0000000000..0057961437
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0b44a5fbe283e9793280a02b313873931663381da5569e19a0640c68d404d249
+size 887
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-96-image.png b/screenshots/Firefox/baseline/s-avatar-dark-96-image.png
new file mode 100644
index 0000000000..43e6898351
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6f500d629f8647f7f1faebaee7ae27916a5e56775bcf27f536f71006feec2b06
+size 4351
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-96.png b/screenshots/Firefox/baseline/s-avatar-dark-96.png
new file mode 100644
index 0000000000..4eea367b36
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79d1d18bc973607ef14054baf98ab91c43ef4886bb1a953fe749301978989848
+size 1156
diff --git a/screenshots/Firefox/baseline/s-avatar-dark-image.png b/screenshots/Firefox/baseline/s-avatar-dark-image.png
new file mode 100644
index 0000000000..1cb9a53ddb
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:40bb1d0a42eb61536eb4193a362ec9be8e6c0dc6f449fda6eac7912ab049222c
+size 1094
diff --git a/screenshots/Firefox/baseline/s-avatar-dark.png b/screenshots/Firefox/baseline/s-avatar-dark.png
new file mode 100644
index 0000000000..60b4604e1b
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:72ae718af90cdb876855fd06cea8e854721fc7ab6a2451408db1340f6b4f0307
+size 598
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128-image.png
new file mode 100644
index 0000000000..a5d0b48051
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e34de05c2fce9ed0ad7927a73dbc1e207608285dbf30255c0ba694c49c06a82
+size 6369
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128.png
new file mode 100644
index 0000000000..dfc1fc9a7e
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fe344525d527644dc7d2d04c2f6922415e551b6a614a3c7de9b03678313ffa9
+size 1702
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24-image.png
new file mode 100644
index 0000000000..480012a1be
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f17c1a347a45192c52147be1d5dc291720992edb3fa09f07c81b39a6d6c9fffb
+size 1481
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24.png
new file mode 100644
index 0000000000..0c5ef8285e
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db694b53e827a474fb9a02a848c18dc1a5d807f4f67da37e4f3c7a0318f6dfdc
+size 745
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32-image.png
new file mode 100644
index 0000000000..75619d5337
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:770c1dc2c9b65101b6480c6cf9577b99614de2afb65c6324428b9efe6d4654a5
+size 1909
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32.png
new file mode 100644
index 0000000000..c117e08f8b
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2bf407bd60ea7cbe41ebf5a8c1a313a0787b3a412722b49dce1207e008dac793
+size 877
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48-image.png
new file mode 100644
index 0000000000..f932207e61
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4558020cd5135fa5ed9eea0c590185474d7a4b993f3e08cf135f818a1643083
+size 2427
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48.png
new file mode 100644
index 0000000000..7a5958b33c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12b43d65258a90f02da8e367a1c1940390c42edce24fea8707db57625e160d14
+size 930
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64-image.png
new file mode 100644
index 0000000000..d31ed95d3b
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:43b08c0ee579ecab520d88ba8343727b12b6518b1ba7b3c7a8fa0830e31da099
+size 3209
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64.png
new file mode 100644
index 0000000000..cb5d43c794
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:719808e640a676578580c13a7748dfba80e0ff5633da371fabe99bf6f5b3fdf8
+size 1076
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96-image.png
new file mode 100644
index 0000000000..4c847218f1
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:30a651b6118afc658874e142b60acb5324603c5d4ff9fa11c1e153f131617764
+size 4657
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96.png
new file mode 100644
index 0000000000..541b7d50d7
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae18f2e076c1aed5f3991e323424a018651d19eba07042d3f273fb5b1d44d563
+size 1445
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-image.png
new file mode 100644
index 0000000000..33522c3103
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:24cfd4af96ca55c16eff2acb1b8c29a47b1b256c8ee2976a29e33b4af05a994c
+size 1191
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-dark.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark.png
new file mode 100644
index 0000000000..4c6e4fbbcb
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ac6b093f54dd4271535e8728a5c1bd5c86b046a59adf1bd8728a125ae1c7e0d
+size 721
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128-image.png
new file mode 100644
index 0000000000..e4ed3e7333
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f550953c8992d15742f3e8671d58d36ea1103547ff09361302748ebcb8e0979
+size 6410
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128.png
new file mode 100644
index 0000000000..7d5bb1b9b4
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba6801be48b68793224e580c3325bf850653dc1a83ed843ba33324f16da0e4c9
+size 1540
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24-image.png
new file mode 100644
index 0000000000..7015d49b54
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c54fd519920073905012d8401bfc3290deb3af636f63485d9b73984ac4c1ff79
+size 1474
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24.png
new file mode 100644
index 0000000000..32fed4fd59
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:321c0b1b1452e44aa21dfd3fd5ea09b12702683a0c806c28a808f06258bfa3c4
+size 756
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32-image.png
new file mode 100644
index 0000000000..c097fa2e4c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:01a5d83832744006b2ebc34745692cf8f868d4ba29da428d92e879c09f212efe
+size 1919
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32.png
new file mode 100644
index 0000000000..8d992deb42
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1bd31a63dcfcb20a615fda4ac9cbf1cb41be56f3101b4084a704400c8a9e7973
+size 871
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48-image.png
new file mode 100644
index 0000000000..88d5dfe9ed
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9afd7e91778bd90fe569fc7de21e9c4fe2201a5a07e75a4698fd5e756fbbccc8
+size 2433
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48.png
new file mode 100644
index 0000000000..de84109f64
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:93087a615c0802ae22213b2cdcd916559ed3b1dada0cd69caa65ad8d9eae5554
+size 929
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64-image.png
new file mode 100644
index 0000000000..f83c3b0b28
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:601b49fe72a142584f4da783a052f314f2c620cb822e8b3bf961aacc9ed486d3
+size 3195
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64.png
new file mode 100644
index 0000000000..01d347ecd2
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0f3f5cefb21b27e31c0d8f5ba2b4dbe43cf2a0f0b28ccc85e2220a04e8f07756
+size 1080
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96-image.png
new file mode 100644
index 0000000000..70a89b2b5d
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:29d5f5bf8181ef2839e6f48787de2385018fcd07a22ce0a02f4aa3fb52a1b205
+size 4674
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96.png
new file mode 100644
index 0000000000..d5a699e44c
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bbe6a52e5a197bb0c3e4943c418a00e3781053aeb7b1b3c63a5f51871df868fb
+size 1436
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light-image.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-image.png
new file mode 100644
index 0000000000..268a49b42a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:039ef0d028b34b481161fb4433895ddaf0b169b8ae07ec49f49e51b1a1e64836
+size 1187
diff --git a/screenshots/Firefox/baseline/s-avatar-highcontrast-light.png b/screenshots/Firefox/baseline/s-avatar-highcontrast-light.png
new file mode 100644
index 0000000000..88cb15c964
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1fd26bfdd3f9cd75a8a7d7f68ba5e14aed8b955fae6c3027179b6b538930bb00
+size 721
diff --git a/screenshots/Firefox/baseline/s-avatar-light-128-image.png b/screenshots/Firefox/baseline/s-avatar-light-128-image.png
new file mode 100644
index 0000000000..193254ead5
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3b486f76436caf792dfcd6e67170bbb87c2f5baae7c72ba8ee948b85193eed5
+size 6007
diff --git a/screenshots/Firefox/baseline/s-avatar-light-128.png b/screenshots/Firefox/baseline/s-avatar-light-128.png
new file mode 100644
index 0000000000..9602cf3a43
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c7e4fb8bead1fd7c9e7b684aa90d14713e5dcd900f2e3fd7a841c52545f4d2e
+size 683
diff --git a/screenshots/Firefox/baseline/s-avatar-light-24-image.png b/screenshots/Firefox/baseline/s-avatar-light-24-image.png
new file mode 100644
index 0000000000..46b0b1a40e
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9485b37599785a3771fac1fb5c8b3f24455fa72308cc56a095d4ef923d06baf9
+size 1347
diff --git a/screenshots/Firefox/baseline/s-avatar-light-24.png b/screenshots/Firefox/baseline/s-avatar-light-24.png
new file mode 100644
index 0000000000..789f210fe3
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ee848b4e1c713248c8659ef8886d44753fa7719a466adba91ca9d9026d1048e
+size 441
diff --git a/screenshots/Firefox/baseline/s-avatar-light-32-image.png b/screenshots/Firefox/baseline/s-avatar-light-32-image.png
new file mode 100644
index 0000000000..fa22a5a5fb
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ddaf06582413a090453de922cc796f2d46eb353d5bde97ba4d8c859dbfd6047
+size 1680
diff --git a/screenshots/Firefox/baseline/s-avatar-light-32.png b/screenshots/Firefox/baseline/s-avatar-light-32.png
new file mode 100644
index 0000000000..789f210fe3
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ee848b4e1c713248c8659ef8886d44753fa7719a466adba91ca9d9026d1048e
+size 441
diff --git a/screenshots/Firefox/baseline/s-avatar-light-48-image.png b/screenshots/Firefox/baseline/s-avatar-light-48-image.png
new file mode 100644
index 0000000000..69fdbddb45
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:27feabc04271b3f8a94c671298f2525f1557bfeb964bcfbf54c94ffa60e96456
+size 2202
diff --git a/screenshots/Firefox/baseline/s-avatar-light-48.png b/screenshots/Firefox/baseline/s-avatar-light-48.png
new file mode 100644
index 0000000000..789f210fe3
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ee848b4e1c713248c8659ef8886d44753fa7719a466adba91ca9d9026d1048e
+size 441
diff --git a/screenshots/Firefox/baseline/s-avatar-light-64-image.png b/screenshots/Firefox/baseline/s-avatar-light-64-image.png
new file mode 100644
index 0000000000..1af25c77f2
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cae4dc8875f268e06429154ce49b0b89c9f12f0daf30de6ee326b38e865e6523
+size 2923
diff --git a/screenshots/Firefox/baseline/s-avatar-light-64.png b/screenshots/Firefox/baseline/s-avatar-light-64.png
new file mode 100644
index 0000000000..789f210fe3
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ee848b4e1c713248c8659ef8886d44753fa7719a466adba91ca9d9026d1048e
+size 441
diff --git a/screenshots/Firefox/baseline/s-avatar-light-96-image.png b/screenshots/Firefox/baseline/s-avatar-light-96-image.png
new file mode 100644
index 0000000000..5e6ce172a5
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9ed02dad9745f37c4ec9ff34bb271862588a2a3bbecab57d3d9d4c38fa4156a6
+size 4280
diff --git a/screenshots/Firefox/baseline/s-avatar-light-96.png b/screenshots/Firefox/baseline/s-avatar-light-96.png
new file mode 100644
index 0000000000..3e6444c118
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2001ba3434e4396599d87ff0b4a2252af7d23b2433ea664dd44d0034e30180a6
+size 459
diff --git a/screenshots/Firefox/baseline/s-avatar-light-image.png b/screenshots/Firefox/baseline/s-avatar-light-image.png
new file mode 100644
index 0000000000..47330e0a3a
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d53916e642579459f5b3e2cdaa835eb53443fbff6caa9515244c9f0f3e0b12c
+size 1071
diff --git a/screenshots/Firefox/baseline/s-avatar-light.png b/screenshots/Firefox/baseline/s-avatar-light.png
new file mode 100644
index 0000000000..789f210fe3
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-avatar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2ee848b4e1c713248c8659ef8886d44753fa7719a466adba91ca9d9026d1048e
+size 441
diff --git a/screenshots/Firefox/baseline/s-btn-is-loading.png b/screenshots/Firefox/baseline/s-btn-is-loading.png
deleted file mode 100644
index c631d84ca3..0000000000
--- a/screenshots/Firefox/baseline/s-btn-is-loading.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7b797e6753a3e9a5d41b546ce01f8f7adc7abb4562dcddfdbe51c005340519e4
-size 1517
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-128-image.png b/screenshots/Webkit/baseline/s-avatar-dark-128-image.png
new file mode 100644
index 0000000000..4b6a1ba576
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f26f9dd5f711f803a0d6477fbd8014be4e1817afb1021af59fa5fca6cd4fd1e2
+size 4726
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-128.png b/screenshots/Webkit/baseline/s-avatar-dark-128.png
new file mode 100644
index 0000000000..b454ce59ad
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92ced411b429ed54166ec162cd3757b1041845a226cd6a14603e04e396f60dfe
+size 1429
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-24-image.png b/screenshots/Webkit/baseline/s-avatar-dark-24-image.png
new file mode 100644
index 0000000000..43aa784344
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f0241de55ee2c737f0c0180b7a4de7d3be519a4837bec3a24eb5c7a1451089f
+size 1332
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-24.png b/screenshots/Webkit/baseline/s-avatar-dark-24.png
new file mode 100644
index 0000000000..ac186c01eb
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6e500e7b5734e83667309d9766718e300e70360144e9b32ec0b2003d945f21f2
+size 717
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-32-image.png b/screenshots/Webkit/baseline/s-avatar-dark-32-image.png
new file mode 100644
index 0000000000..7da8367b98
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee42b9f071b023b7c364c82119fe88a84f6d8f252f4413aa2a344398fc611fdc
+size 1592
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-32.png b/screenshots/Webkit/baseline/s-avatar-dark-32.png
new file mode 100644
index 0000000000..a8137ee9d6
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d0af1f53d7e10745dc00384ae1021733680eb11fa341f512c8af4c684229ac2
+size 787
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-48-image.png b/screenshots/Webkit/baseline/s-avatar-dark-48-image.png
new file mode 100644
index 0000000000..636021b161
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c6809fcf3eaa64e0cab5086cc3b1971d5064984ca369d15d6a65803692b23131
+size 2061
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-48.png b/screenshots/Webkit/baseline/s-avatar-dark-48.png
new file mode 100644
index 0000000000..8b3d2518fa
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3bf6a2507e4044fc3ac3fba4c82d9afc96a4defe007a5e1ac50dfe90972446c
+size 819
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-64-image.png b/screenshots/Webkit/baseline/s-avatar-dark-64-image.png
new file mode 100644
index 0000000000..2d5aba0a46
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b43ef58b99d587feed564974bc8bf218351ec92c03d3309475ae2f6b73188b07
+size 2545
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-64.png b/screenshots/Webkit/baseline/s-avatar-dark-64.png
new file mode 100644
index 0000000000..5b606d7aa5
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a66bf8a90e78a13ab0b53c1c4b1cca7d07865cf6a35a029e892cbf7e7c58a1d
+size 960
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-96-image.png b/screenshots/Webkit/baseline/s-avatar-dark-96-image.png
new file mode 100644
index 0000000000..c046864dd8
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f15b38b2b537cc724702160c0bf5c7de3645e6d8a99653706aabc2535cd6ef8
+size 3571
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-96.png b/screenshots/Webkit/baseline/s-avatar-dark-96.png
new file mode 100644
index 0000000000..a32342252d
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3fe8f833fa3685d79d07c46607395beb9a65651c5e41c2af11ddf7e65af82bfc
+size 1140
diff --git a/screenshots/Webkit/baseline/s-avatar-dark-image.png b/screenshots/Webkit/baseline/s-avatar-dark-image.png
new file mode 100644
index 0000000000..c0b72f55bf
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d6b2d085d4ad09965a278362f82b51d480c9c78a6c7a6d4e892a547778b330ea
+size 1115
diff --git a/screenshots/Webkit/baseline/s-avatar-dark.png b/screenshots/Webkit/baseline/s-avatar-dark.png
new file mode 100644
index 0000000000..b8df01d956
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b1a0776c9b764fddc758437512f7b37d1fc62eb779dad0b19081411cdf85ca05
+size 750
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128-image.png
new file mode 100644
index 0000000000..fcaafcf2d1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2cb03cfeef1e4cf79238cd5cc063f6c9d97ec39ec9f32d5f49eb73c98c9fd218
+size 4911
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128.png
new file mode 100644
index 0000000000..f529e325b8
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:77cb6b6ada52610b3e6a20b5a5c0e0aa7e763a69b534aaa411cff126e5f39447
+size 1483
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24-image.png
new file mode 100644
index 0000000000..8da4d6765b
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd5ae3e85930a45c01433e815a4a8cd2837461fb933d6ac11e0950d8394b8eaf
+size 1360
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24.png
new file mode 100644
index 0000000000..4acc9d12db
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b1cb2b5bc867882301c5543214fa735eb4dd8147928bb5939792abc51390efd4
+size 825
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32-image.png
new file mode 100644
index 0000000000..0a22bb51f2
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1d7d99281a43ad938f4cc4ebf489770a56de6b190e8236cb76ef9c06e8a5f83
+size 1716
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32.png
new file mode 100644
index 0000000000..39d19753d3
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9bce4a6d3199c0f3fb9e682d37001abc213faa266da0589a4489f95049e6992a
+size 864
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48-image.png
new file mode 100644
index 0000000000..d7486d8ed5
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9254853e8cd78ceb657c6955861e48343c18cf45483f45362b77e1a511162d80
+size 2188
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48.png
new file mode 100644
index 0000000000..57c88fd67c
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2dc265812610c7ebf7230c682cc6cbc22ca21b5955c7e190c5c65a7051286f7c
+size 745
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64-image.png
new file mode 100644
index 0000000000..0b008707c5
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c23c6135133cc9aab129d58a9c878833bf7d26f072ebb2666f3252734978540
+size 2628
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64.png
new file mode 100644
index 0000000000..9f9cbfb93e
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b744de6047a57b26b622d1a3054fbee9382ef337cf423609a48c0fad3f2294d
+size 898
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96-image.png
new file mode 100644
index 0000000000..570e4a7704
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7e822e29fd8ebee4644642fa724ccb7803a036ef3965268c9d49b456eba12be9
+size 3847
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96.png
new file mode 100644
index 0000000000..d0dba53a56
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:64a962c143c1e3e7060921e7f7c7c502c7d958cdf01050a91f8399dae0cd216a
+size 1217
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-image.png
new file mode 100644
index 0000000000..98ac1e26af
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a002c17aa1733e77b093e47ba7fed27afab2cd46fec3afdc14e32212b60b8d3
+size 1101
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-dark.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark.png
new file mode 100644
index 0000000000..76e8838d9f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:be95b6fc975abf5a98b3f47041088c5ea82c21ff7b5ecd94e41f23a8541daede
+size 806
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128-image.png
new file mode 100644
index 0000000000..25a3282951
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:136f46312128252b9d93eac26880be3c4a15e09483bfd6316b0a93c548ac1326
+size 4837
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128.png
new file mode 100644
index 0000000000..722b2c0b88
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ada7c58c4c6d7f6e8736d41dcb0388958087c12f0d86f4a69f72910ac6c107b5
+size 1261
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24-image.png
new file mode 100644
index 0000000000..3c9869fd4a
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ffba3458c2ecfae3eeac9f2a6d9b0d4a98fa0ace449bab80a235571578fd22cf
+size 1330
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24.png
new file mode 100644
index 0000000000..cd75216798
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f26ee67eea1e469909f030e463253615341c43bf50936bef3900ea494a67cc15
+size 781
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32-image.png
new file mode 100644
index 0000000000..22cf77678c
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:731caafe2bc722fc588cd7d7e315693803df2c79bf456e36ce39336378be950d
+size 1702
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32.png
new file mode 100644
index 0000000000..e4db23f5d1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8875ff2e8069b8ef3194c89580ab0018b18e222ba7bcad0a4136973728af7fce
+size 879
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48-image.png
new file mode 100644
index 0000000000..b734947d96
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f95a6fa7ee42c4e4b3987c40bd0dc670a95b36999462ad9b72169e9775a4d61
+size 2153
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48.png
new file mode 100644
index 0000000000..ce1fb134fd
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e0463ce4e40d72d4a40034c397886100b96c011977950640767dfa752ea9403
+size 748
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64-image.png
new file mode 100644
index 0000000000..d71d15b46f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18dbf16fffabea242dff610a747645665c417a9b064f2379c0cb900e0c3e2b8a
+size 2595
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64.png
new file mode 100644
index 0000000000..9c4de57952
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:56875600a1ae60e453f5435cb3ba05e3b70611cb4172b392cf285bb39c40df1d
+size 882
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96-image.png
new file mode 100644
index 0000000000..ef73928041
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31d1362c8c6d7fc0583295c4933d3c3ca3a433e080f1ee687b0f2707481a0ae2
+size 3796
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96.png
new file mode 100644
index 0000000000..f9a8ca82d2
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:73e7e4059420abb7cfc0bdefb77ce1fa2afa90db718c552a0c9c73b9eccbb2b7
+size 1145
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light-image.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-image.png
new file mode 100644
index 0000000000..6f500f1ade
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf5ce28b11c4f40fdcaffba6c4b6693c329d2652f978a430bda01651e4f0208c
+size 1077
diff --git a/screenshots/Webkit/baseline/s-avatar-highcontrast-light.png b/screenshots/Webkit/baseline/s-avatar-highcontrast-light.png
new file mode 100644
index 0000000000..5a836b31f3
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a634230a22668cb62a6c01fc4be43368f9053436a18e0ad5717c0bf9960d888
+size 787
diff --git a/screenshots/Webkit/baseline/s-avatar-light-128-image.png b/screenshots/Webkit/baseline/s-avatar-light-128-image.png
new file mode 100644
index 0000000000..86638b0148
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-128-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e0134d0c02dd2cba1d60ef0e4392e1fe1275f7e94fe5cc664412c5c739f04a7f
+size 4541
diff --git a/screenshots/Webkit/baseline/s-avatar-light-128.png b/screenshots/Webkit/baseline/s-avatar-light-128.png
new file mode 100644
index 0000000000..ad5c58be85
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-128.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f030f5afc362ded0653462c5e19b0f26780747225a26f91fc74352fb8ef557f6
+size 776
diff --git a/screenshots/Webkit/baseline/s-avatar-light-24-image.png b/screenshots/Webkit/baseline/s-avatar-light-24-image.png
new file mode 100644
index 0000000000..1e729b46a0
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-24-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:903ead847a7cec5ee7c281579fff49188edfcdb5cfa8d01c1191c3b6a6381d7d
+size 1305
diff --git a/screenshots/Webkit/baseline/s-avatar-light-24.png b/screenshots/Webkit/baseline/s-avatar-light-24.png
new file mode 100644
index 0000000000..afe9ca5362
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-24.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2362ce063a966cd36f1a2ccaa517168b25395da568e778f4e2322f924a8fb59
+size 532
diff --git a/screenshots/Webkit/baseline/s-avatar-light-32-image.png b/screenshots/Webkit/baseline/s-avatar-light-32-image.png
new file mode 100644
index 0000000000..298f2e42cb
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-32-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba5f7ddb0c7428b64164e562c2659fa89638041e4fc0704dc6889d25b51f5295
+size 1556
diff --git a/screenshots/Webkit/baseline/s-avatar-light-32.png b/screenshots/Webkit/baseline/s-avatar-light-32.png
new file mode 100644
index 0000000000..afe9ca5362
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-32.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2362ce063a966cd36f1a2ccaa517168b25395da568e778f4e2322f924a8fb59
+size 532
diff --git a/screenshots/Webkit/baseline/s-avatar-light-48-image.png b/screenshots/Webkit/baseline/s-avatar-light-48-image.png
new file mode 100644
index 0000000000..777b7a60ff
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-48-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a423d92b16df613a815b44c20cc80db21ca233ad6a1c99f52caae01ab4845a9
+size 2015
diff --git a/screenshots/Webkit/baseline/s-avatar-light-48.png b/screenshots/Webkit/baseline/s-avatar-light-48.png
new file mode 100644
index 0000000000..afe9ca5362
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-48.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2362ce063a966cd36f1a2ccaa517168b25395da568e778f4e2322f924a8fb59
+size 532
diff --git a/screenshots/Webkit/baseline/s-avatar-light-64-image.png b/screenshots/Webkit/baseline/s-avatar-light-64-image.png
new file mode 100644
index 0000000000..7b560cdfc1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-64-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e2bb7010ef9b4e845dc29b3cf9931397087415859c0d8bc0eb7190d1d0ad7492
+size 2471
diff --git a/screenshots/Webkit/baseline/s-avatar-light-64.png b/screenshots/Webkit/baseline/s-avatar-light-64.png
new file mode 100644
index 0000000000..afe9ca5362
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-64.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2362ce063a966cd36f1a2ccaa517168b25395da568e778f4e2322f924a8fb59
+size 532
diff --git a/screenshots/Webkit/baseline/s-avatar-light-96-image.png b/screenshots/Webkit/baseline/s-avatar-light-96-image.png
new file mode 100644
index 0000000000..b4f91873e3
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-96-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c936428caa416aab14dfeace87ba40cc128ff9a38c82620f076a106793e3b41d
+size 3472
diff --git a/screenshots/Webkit/baseline/s-avatar-light-96.png b/screenshots/Webkit/baseline/s-avatar-light-96.png
new file mode 100644
index 0000000000..9af6d5a894
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-96.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2dc78d589452d51ccf1036c0554bd785aedb007c9e6af24c541c4457e23427be
+size 553
diff --git a/screenshots/Webkit/baseline/s-avatar-light-image.png b/screenshots/Webkit/baseline/s-avatar-light-image.png
new file mode 100644
index 0000000000..f7df9bd302
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light-image.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0bcacf04f46694122df361bf0e32e9d409d454d14b46ae68f8e12b9fa8bfc653
+size 1094
diff --git a/screenshots/Webkit/baseline/s-avatar-light.png b/screenshots/Webkit/baseline/s-avatar-light.png
new file mode 100644
index 0000000000..afe9ca5362
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-avatar-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d2362ce063a966cd36f1a2ccaa517168b25395da568e778f4e2322f924a8fb59
+size 532
diff --git a/screenshots/Webkit/baseline/s-btn-is-loading.png b/screenshots/Webkit/baseline/s-btn-is-loading.png
deleted file mode 100644
index c745ca2f2a..0000000000
--- a/screenshots/Webkit/baseline/s-btn-is-loading.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c267091bcae207629e132dd935523eb15cf60ae5ecadc38fad0dafc312cef13f
-size 1673
diff --git a/web-test-runner.config.ci.mjs b/web-test-runner.config.ci.mjs
index d15f1609da..ff0b58aeb9 100644
--- a/web-test-runner.config.ci.mjs
+++ b/web-test-runner.config.ci.mjs
@@ -1,6 +1,113 @@
+// TODO: this needs some cleanup - as of now it's a bit of a copy paste from the summary and default reporter
+// custom reporter to better differentiate between skipped from failing tests and log tests failures stack trace correctly
+import { reportTestsErrors } from "./node_modules/@web/test-runner/dist/reporter/reportTestsErrors.js";
+import { reportTestFileErrors } from "./node_modules/@web/test-runner/dist/reporter/reportTestFileErrors.js";
+import { reportBrowserLogs } from "./node_modules/@web/test-runner/dist/reporter/reportBrowserLogs.js";
+import { TestRunnerLogger } from "./node_modules/@web/test-runner/dist/logger/TestRunnerLogger.js";
+
+const color =
+ ([x, y]) =>
+ (z) =>
+ `\x1b[${x}m${z}\x1b[${y}m${reset}`;
+const reset = `\x1b[0m\x1b[0m`;
+const green = color([32, 89]);
+const red = color([31, 89]);
+const yellow = color([33, 89]);
+const dim = color([2, 0]);
+
+function customReporter(opts) {
+ const { flatten = false } = opts ?? {};
+ let args;
+ let favoriteBrowser;
+
+ const logger = new TestRunnerLogger();
+
+ function log(logger, name, passed, skipped, prefix = " ", postfix = "") {
+ let sign;
+ if (skipped) {
+ sign = yellow("o");
+ } else {
+ sign = passed ? green("✓") : red("𐄂");
+ }
+ if (flatten) logger.log(`${sign} ${prefix} ${name}${postfix}`);
+ else logger.log(`${prefix} ${sign} ${name}`);
+ }
+
+ function logResults(logger, results, prefix, browser) {
+ const browserName = browser?.name ? ` ${dim(`[${browser.name}]`)}` : "";
+ for (const result of results?.tests ?? []) {
+ log(
+ logger,
+ result.name,
+ result.passed,
+ result.skipped,
+ prefix,
+ browserName
+ );
+ }
+
+ for (const suite of results?.suites ?? []) {
+ logSuite(logger, suite, prefix, browser);
+ }
+ }
+
+ function logSuite(logger, suite, parent, browser) {
+ const browserName = browser?.name ? ` ${dim(`[${browser.name}]`)}` : "";
+ let pref = parent ? `${parent} ` : "";
+ if (flatten) pref += `${suite.name}`;
+ else logger.log(`${pref}${suite.name}${browserName}`);
+
+ logResults(logger, suite, pref, browser);
+ }
+
+ return {
+ start(_args) {
+ args = _args;
+ favoriteBrowser =
+ args.browserNames.find((name) => {
+ const n = name.toLowerCase();
+ return (
+ n.includes("chrome") ||
+ n.includes("chromium") ||
+ n.includes("firefox")
+ );
+ }) ?? args.browserNames[0];
+ },
+
+ reportTestFileResults({ sessionsForTestFile }) {
+ for (const session of sessionsForTestFile) {
+ logResults(logger, session.testResults, "", session.browser);
+ logger.log("");
+ }
+ reportBrowserLogs(logger, sessionsForTestFile);
+ },
+
+ onTestRunFinished({ sessions }) {
+ const failedSessions = sessions.filter(
+ (s) => !s.skipped && !s.passed
+ );
+ if (failedSessions.length > 0) {
+ logger.log("\n\nErrors Reported in Tests:\n\n");
+ reportTestsErrors(
+ logger,
+ args.browserNames,
+ favoriteBrowser,
+ failedSessions
+ );
+ reportTestFileErrors(
+ logger,
+ args.browserNames,
+ favoriteBrowser,
+ failedSessions,
+ true
+ );
+ }
+ },
+ };
+}
+
import defaultConfig from "./web-test-runner.config.mjs";
-import { summaryReporter } from "@web/test-runner";
-defaultConfig.reporters = [summaryReporter()];
+defaultConfig.reporters = [customReporter()];
export default defaultConfig;
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
index 94b1c0bcb7..ccca9f3a1b 100644
--- a/web-test-runner.config.mjs
+++ b/web-test-runner.config.mjs
@@ -33,7 +33,7 @@ export default {
],
testFramework: {
config: {
- timeout: '5000',
+ timeout: '10000',
},
},
nodeResolve: { browser: true },
@@ -58,18 +58,18 @@ export default {
groups: [
{
name: "a11y",
- files: "lib/test/**/*.a11y.test.ts",
+ files: "lib/components/**/*.a11y.test.ts",
browsers: [
playwrightLauncher({ product: "chromium" }),
]
},
{
name: "unit",
- files: "lib/test/**/!(*.visual|*.a11y).test.ts",
+ files: "lib/components/**/!(*.visual|*.a11y).test.ts",
},
{
name: "visual",
- files: "lib/test/**/*.visual.test.ts",
+ files: "lib/components/**/*.visual.test.ts",
},
],
testsFinishTimeout: 60 * 1000 * 5, // 5 minutes
diff --git a/webpack.config.js b/webpack.config.js
index 2bbadfec9d..e374069421 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,7 +9,7 @@ const baseConfig = (isProd, minify) => ({
devtool: isProd ? false : "inline-source-map",
entry: {
// add .min to the file names of minified bundles
- [minify ? "stacks.min" : "stacks"]: "./lib/ts/index.ts",
+ [minify ? "stacks.min" : "stacks"]: "./lib/index.ts",
},
output: {
filename: `js/[name].js`,