qain diff

http://localhost:5600/http://localhost:5600/?variant=regressed
39 changes
14 primary
25 derived

Primary — the node itself changed

default html > body > header > h1 paint-order stacking order 3 → 4
← no CSS declaration on this node changed
default html > body > header > span[data-testid=plan-badge] style z-index: 20
.badge { z-index: 2 → 0 } theme.regressed.css:21:3
default html > body > header > span[data-testid=plan-badge] paint-order stacking order 4 → 3
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style color: rgb(107, 114, 128)rgb(199, 203, 212)
.muted { color: rgb(107, 114, 128) → rgb(199, 203, 212) } theme.regressed.css:30:3
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] contrast on — ratio 4.83 → 1.63 · falls below WCAG AA-normal
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style color: rgb(107, 114, 128)rgb(199, 203, 212)
.muted { color: rgb(107, 114, 128) → rgb(199, 203, 212) } theme.regressed.css:30:3
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] contrast on — ratio 4.83 → 1.63 · falls below WCAG AA-normal
default html > body > main > footer[data-testid=footnote] style color: rgb(107, 114, 128)rgb(199, 203, 212)
.muted { color: rgb(107, 114, 128) → rgb(199, 203, 212) } theme.regressed.css:30:3
default html > body > main > div > button[data-testid=pay] box resized 0px × +12px
.btn { padding: 8px 16px → 14px 16px } theme.regressed.css:4:3
default html > body > main > div > button[data-testid=download] box resized 0px × +12px
.btn { padding: 8px 16px → 14px 16px } theme.regressed.css:4:3
hover html > body > main > div > button[data-testid=pay] style background-color: rgb(29, 78, 216)rgb(37, 99, 235)
.btn-primary:hover { background: rgb(29, 78, 216) → rgb(37, 99, 235) } theme.regressed.css:15:3
.btn { padding: 8px 16px → 14px 16px } theme.regressed.css:4:3
hover html > body > main > div > button[data-testid=pay] contrast on — ratio 6.7 → 5.17
hover html > body > main > div > button[data-testid=pay] box resized 0px × +12px
hover html > body > main > div > button[data-testid=download] box resized 0px × +12px
.btn { padding: 8px 16px → 14px 16px } theme.regressed.css:4:3

Derived — a consequence of a change above

25 changes
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style text-decoration-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style border-top-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style border-right-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style border-bottom-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style border-left-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=usage-card] > p[data-testid=usage-note] style outline-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style text-decoration-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style border-top-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style border-right-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style border-bottom-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style border-left-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > section[data-testid=invoice-card] > p[data-testid=invoice-note] style outline-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style text-decoration-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style border-top-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style border-right-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style border-bottom-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style border-left-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html > body > main > footer[data-testid=footnote] style outline-color: rgb(107, 114, 128)rgb(199, 203, 212)
default html box resized 0px × +12px
default html > body box resized 0px × +12px
default html > body > main box resized 0px × +12px
default html > body > main > div box resized 0px × +12px
default html > body > main > footer[data-testid=footnote] box moved 0px, +12px
default html > body > main > footer[data-testid=footnote] > a[data-testid=terms] box moved 0px, +12px
hover html > body > main > footer[data-testid=footnote] > a[data-testid=terms] box moved 0px, +12px